
//*********************************************
// 複数のページで使われる共通関数群.
// pairs ネームスペースを使う
//*********************************************
(function(){
if( !window.pairs ) window.pairs = {};
// jQueryの共通設定を行う　
$.ajaxSetup( {
timeout: 100000,
error: function(e){
if( !e.ignoreError ){
pairs.alert(
"ページのロードに失敗いたしました。<br/>"+
"申し訳ありませんが、しばらくお待ちいただいた後にもう一度お試しください。");
}
}
} );
/**
* iframeの中かを判定する.
* 参考: http://www.openspc2.org/reibun/javascript/frame/022/
*/
pairs.isIframe = function(){
return ( window != parent );
};
/**
* ページをリロードする.
* AJAXロードに対応するために必要.
* @param boolean
*/
pairs.reload = function(noModalClose){
if (typeof noModalClose === "undefined") {
pairs.modalCloseAll();
}
if( location.hash ){
move_page( location.hash.substr(2), '#container' );
}else{
move_page( '/search/one/1', '#container' );
}
};
/**
* onloadイベントに実行する関数を追加する
* @param function e onload状態時に実行する関数
*/
pairs.onload = function(e) {
if (window.addEventListener) {
window.addEventListener("load", e, false);
} else if (window.attachEvent) {
window.attachEvent("onload", e);
} else if (window.jQuery) {
window.jQuery("document").ready(function() {
return e();
});
} else {
window.onload = e;
}
};
/**
* 一番上にスクロールする.
*/
pairs.scrollToTop = function(){
pairs.scrollTo(0);
};
/**
* facebookのiframe内でもちゃんとscrollToする
*/
pairs.scrollTo = function(y) {
if ( pairs.isIframe() ) {
FB.Canvas.scrollTo(0,y);
pairs.adjustSize();
} else {
$('html, body').scrollTop(y);
}
};
pairs.smoothScrollTo = function(y, duration) {
if (typeof(duration) == "undefined")
duration = 500;
if( pairs.isIframe() ){
FB.Canvas.getPageInfo(function(pageInfo) {
$({y: pageInfo.scrollTop}).animate(
{y: y},
{duration: duration, step: function(offset) {
FB.Canvas.scrollTo(0, offset);
},
complete: function() {
//pairs.adjustSize(); // IEだとスクロールがリセットされるバグが起きるのでadjustSizeは行わないので必要なときはスクロールの後に明示的に呼び出す
}
});
});
}else{
$($.browser.webkit ? 'body' : 'html').animate({ scrollTop: y }, duration);
}
}
pairs.adjustSize = function(){
if(pairs.isIframe()){
setTimeout( function(){
FB.Canvas.setSize({height:$('body').height()}); // キャンバスサイズをリセットする
}, 200 );
}
};
/**
* confirmを出す.
* @param message
* @param callback
*/
pairs.confirm = function( message, callback ){
var dialog = $('<div class="modal-window modal-alert">'+
' <a href="#" class="modal-close modal-window-close"></a>'+
' <div class="message"></div>'+
' <div class="modal-buttons">'+
' <a href="#" class="btn btn-large modal-close" style="display:inline-block; width:150px;">キャンセル</a>'+
' <a href="#" class="btn btn-large btn-primary modal-ok" style="display:inline-block; width:150px;">ＯＫ</a>'+
' </div>'+
'</div>' );
$('.message',dialog).html(message);
pairs.modal( dialog, {fixed:true}, function(ok){
if( callback ) callback(ok);
});
};
/**
* alertを出す.
* @param message
*/
pairs.alert = function( message , cb){
var dialog = $('<div class="modal-window modal-alert">'+
' <a href="#" class="modal-close modal-window-close"></a>'+
' <div class="message"></div>'+
' <div class="modal-buttons"><a href="#" class="btn btn-primary btn-large modal-close">閉じる</a></div>'+
'</div>' );
$('.message',dialog).html(message);
pairs.modal( dialog, {fixed:true}, cb);
};
/**
* toastだす.
* @param message
*/
pairs.toast = function( message ){
var second = 2;
var dialog = $('<div class="toast-window">'+
' <div class="message">'+message+'</div>'+
'</div>' );
$(dialog).appendTo('body').hide().fadeIn(200).delay(second * 1000).fadeOut(200);
// $(dialog).appendTo('body').show().delay(200).hide();
};
// モーダルウィンドウのスタック
// ( { callback:コールバック, dialog:ダイアログのNode } の形のオブジェクトの配列 )
var modalStack = [];
var modalDropback;
/**
* モーダルなダイアログを表示する.
*
* @param element 表示するNode
* @param opt オプション(現在は非使用)
* @param callback コールバック関数、第一引数にOKが押されたかどうかが入る
* @return ダイアログのNode
*/
pairs.modal = function( element, opt, callback ){
opt = opt || {};
var dialog = $(element).addClass('modal-dialog')
.css({zIndex:10001+modalStack.length*10})
.hide()
.prependTo('body');
if( !modalDropback ){
modalDropback = $('<div class="modal-overlay"></div>')
.hide()
.prependTo('body');
}
modalDropback.css({zIndex:10000+modalStack.length*10}).show();
if( pairs.isIframe() && FB ){
dialog.css( {left: ($('body').width()-dialog.width())/2, top: $(window.document).scrollTop()+100 }).show();
// モーダルが表示されているページトップへ移動させる
FB.Canvas.scrollTo(0, 0);
/*
// iframe内のとき
FB.Canvas.getPageInfo( function(pageInfo){
dialog.css( {left: ($('body').width()-dialog.outerWidth())/2, top: pageInfo.scrollTop + 100 }).show();
});
*/
}else{
// iframe内でない(デバッグ時のみ)
dialog.css( {left: ($('body').width()-dialog.width())/2, top: $(window.parent.document).scrollTop()+100 }).show();
}
// 閉じる処理
$('.modal-close').click( function(){
pairs.modalClose(false);
return false;
});
$('.modal-ok').click( function(){
pairs.modalClose(true);
return false;
});
// スタックに積む
modalStack.push( {callback:callback, dialog:dialog } );
return dialog;
};
$(".modal-overlay").off('click');
$(".modal-overlay").on('click',function(){
pairs.modalClose(false);
});
/**
* 画面をWEBからロードしてモーダル表示する.
* @param url 読み込むURL
* @param param HTTPパラメータ
* @param opt オプション( pairs.modal() と同様 )
* @param callback 終了時に呼ばれるコールバック
*/
pairs.modalLoad = function( url, param, opt, callback ){
pairs.sendGAPV(url);
$.post(url,param,function(data){
pairs.modal( $('<div>').html(data), {}, function(){
if( callback ) callback();
});
});
};
/**
* 読込中のオーバーレイを掛ける
*/
pairs.overlay = function (){
// ちょっとまってから、ローディングを表示する
$('.modal-overlay').remove();
var overlay = $('<div class="modal-overlay" style="display:block; padding-top: 16%; text-align: center; position: fixed; "><img src="/images/loder.gif"/></div>');
overlay.appendTo('#container').css({opacity:0.01}).delay(200).animate({opacity:1},1000);
return overlay;
}
/**
* ダイアログを閉じる.
*
* @param result ダイアログのコールバックのパラメータ
*/
pairs.modalClose = function( result ){
var top = modalStack.pop();
if( top ){
top.dialog.remove();
if( modalStack.length > 0 ){
modalDropback.css({zIndex:10000+(modalStack.length-1)*10});
}else{
modalDropback.hide();
}
if( top.callback && typeof(result) != 'undefined' ) top.callback(result);
}
};
/**
* ダイアログをすべて閉じる.
*
* @param result ダイアログのコールバックのパラメータ
*/
pairs.modalCloseAll = function(){
while( modalStack.length > 0 ) pairs.modalClose();
};
/**
* イメージを親要素にフィットさせる.
* 親が"<a>"だった場合は、さらにその親にあわせる。
*/
pairs.fitImages = function(){
$(".img-fit").on("load",function(){
var iw, ih;
var parent = $(this).parent();
if( parent[0].nodeName == 'A' ) parent = parent.parent();
var cw = parent.width();
var ch = parent.height();
var width = $(this).width(), height = $(this).height();
if(width / height < cw / ch){
iw = - (width * ch / height - cw) / 2;
$(this).css("left", iw+"px");
$(this).css('height', ch);
}
else {
ih = - (height * cw / width - ch) / 2;
$(this).css("position", "relative");
$(this).css("top", ih+"px");
$(this).css('width', cw);
}
});
};
/**
* フォームをsubmitして、その内容を #container に書き込む
*
* @param form formのjQueryオブジェクトもしくはCSSセレクタ
* @param callback 読み込み終わった時に呼ばれるコールバック
*/
pairs.submit = function( form, callback ){
// MEMO: move_pageと同様の動作をさせているので、move_pageの内容を変えたら追随させること
pairs.sendGAPV(form.replace('#',''));
// ちょっとまってから、ローディングを表示する
var overlay = $('<div class="modal-overlay" style="display:block; padding-top: 16%; text-align: center; position: fixed;"><img src="/images/loder.gif"/></div>');
overlay.appendTo(container).css({opacity:0.01}).delay(200).animate({opacity:1},1000);
var param = $(form).serializeArray();
$.post($(form).attr('action'), param, function(data){
$(container).html(data);
if( pairs.isIframe() && FB ){
setTimeout( function(){
FB.Canvas.setSize({height:$('body').height()+20}); // キャンバスサイズをリセットする
}, 200 );
}
pairs.scrollToTop();
if( callback ) callback();
}).error( function(){
overlay.remove();
});
};
/**
* ローディング画面付き jQuery.post .
* 引数は、jQuery.post と同様
*/
pairs.lockedPost = function(){
// ちょっとまってから、ローディングを表示する
var overlay = $('<div class="modal-overlay" style="display:block; padding-top: 16%; text-align: center; position: fixed;"><img src="/images/loder.gif"/></div>');
overlay.appendTo('#container').css({opacity:0.01}).delay(200).animate({opacity:1},1000);
var args = Array.prototype.slice.apply( arguments );
// 最初のfunctionをコールバックとして横取りする
for( var i=0; i<args.length; i++ ){
if( typeof args[i] === 'function' ){
var oldCallback = args[i];
args[i] = function(){
overlay.remove();
oldCallback.apply( $, arguments );
};
break;
};
}
$.post.apply( $, args ).error( function(){ overlay.remove(); } );
};
/**
* タブの選択状態を切り替える
*
* @param index
* 未選択 :0 or 引数無し
* 検索 :1 or 'search'
* マイページ :2 or 'mypage'
* 設定 :3 or 'setting'
* 有料 :4 or 'pay'
* コミュニティ :6 or 'community'
*/
pairs.selectTab = function(index){
var map = {1:'search',2:'mypage',3:'setting',4:'pay',5:'information',6:'community',7:'visitor'};
if(index == undefined || index == 0){
return;
}
$('#nav li').removeClass('active');
if(index in map){
$('#tab_'+map[index]).addClass('active');
}else{
$('#tab_'+index).addClass('active');
}
};
/**
* Google Analytics へページビューを渡す
*
* @param path 渡すURL(/から)
*/
pairs.sendGAPV = function(path){
_gaq.push(['_trackPageview',path]);
pairs.log('Google AnalyticsへPV送信完了: '+path);
}
/**
* Google Analytics へイベントを渡す
*/
pairs.sendGAEvent = function(category,action,label,value,mode){
_gaq.push(['_trackEvent',category,action,label,value,mode]);
pairs.log('Google Analyticsへイベント送信完了: ' + category + '/' + action + '/' + label + '/' + value + '/' + mode);
}
/**
* ABテストのログをGAに送る
*
* @param cat ABテストのcategory e.g, point_lpo, regist_lpo
* @param times categoryに対する実施回数 第2回ポイントページLPOであれば、catがpoint_lpo, timesが2
* @param action ユーザーのアクション：e.g, show, click
* @param ab ABテストの種類 e.g, a, b, c ...
*/
pairs.abtest = function (cat, times, action, ab, val) {
pairs.sendGAEvent('ab_test_pc', cat + '_' + times, action + '_' + ab, val, true);
}
/**
* 開発時にconsole.logするもの
*
* @param path 渡すURL(/から)
*/
pairs.log = function(text){
if( ENVIRONMENT.lastIndexOf('development', 0) == 0 ){
if(typeof console !== 'undefined'){
console.log(text);
}
}
}
/**
* 初回ログイン時の制御用
*/
var beginner = false;
pairs.setBeginner = function(bool){
beginner = bool;
};
pairs.isBeginner = function(){
return beginner;
};
/**
* modal-close mouse over
*/
pairs.modalOver = function() {
$(document).on('mouseover', 'img[src$="closeButton.png"]',
function() {
$(this).attr("src", "/images/closeButtonOver.png");
return false;
}
).on('mouseout', 'img[src$="closeButtonOver.png"]',
function() {
$(this).attr("src", "/images/closeButton.png");
return false;
}
);
return false;
}
pairs.getParameter = function() {
var hash = new Array();
var param;
if(param = location.search){
var parray = param.replace('?','').split('&');
for(var i=0;i<parray.length;i++){
var n = parray[i].split('=');
hash[n[0]] = n[1];
}
}else{
return hash;
}
return hash;
}
/**
* プレースホルダーをIE8,9に対応させる
* formによるsubmit以外の方法で送るとプレースホルダーの値が送られてしまうので注意
*
* @param selector 省略可。指定するときはプレースホルダーを作るオブジェクトを表すjQueryのセレクタ文字列。
* @param text 省略可。プレースホルダーの文字列。省略するとplaceholderで指定してあるデフォルトの値になる
*/
pairs.setPlaceholderIE = function(selector, text) {
// IE10でも文字色が黒くなる不具合があったのでJSで
if (typeof($.browser.msie) != "undefined" && $.browser.version <= 10) {
if (typeof(selector) == "undefined") {
var target = $("[placeholder]");
} else {
var target = $(selector);
}
if (typeof(text) == "undefined") {
$.each(target, function(i, v){
v.placeholderText = $(v).attr("placeholder"); // IE9だと未定義の属性にプロパティとしてアクセスできないのでjQueryをかぶせる
});
} else {
$.each(target, function(i, v){
v.placeholderText = text;
});
}
var placeholderCSS = {
"color": "#a1a7ac"
};
var saveCSS = function(element) {
if (typeof(element.originalCSS) != "undefined")
return;
element.originalCSS = {};
for (var k in placeholderCSS) {
element.originalCSS[k] = $(element).css(k);
}
};
$.each(target, function(i, v){
saveCSS(v);
$(v).val(v.placeholderText);
v.placeholderState = "show";
$(v).css(placeholderCSS);
});
target.focus(function(){
if ($(this).get(0).placeholderState == "show") {
$(this).val("");
$(this).get(0).placeholderState = "";
$(this).css($(this).get(0).originalCSS);
}
});
target.blur(function(){
if ($(this).val() == "") {
$(this).css(placeholderCSS);
$(this).val($(this).get(0).placeholderText);
$(this).get(0).placeholderState = "show";
}
});
$.each(target, function(i,v) {
$(v).parents("form").submit(function(){
if (v.placeholderState == "show") {
$(v).val("");
v.placeholderState = "";
}
});
});
}
};
})();
